<template>
<div class="commonContent">
  <div class="proejctTitle">{{detailData.projectName}}</div>
  <van-swipe class="my-swipe mt12" :autoplay="4000" v-if="detailData.photos && detailData.photos.length > 0">
    <van-swipe-item v-for="item in detailData.photos">
      <div class="imgDiv" :style="{background: 'url(' + setPreviewUrl(item) + ')', backgroundSize:'cover', backgroundPosition: 'center'}"
        @click="handlePreview(item,index)"
      ></div>
    </van-swipe-item>
  </van-swipe>
  <div class="cardContent mt12">
    <span style="font-weight:bolder">项目内容</span>
    <div class="mb12" v-for="(item,index) in dataList" :class="index == 0 ? 'mt20' : ''">
      <van-row>
        <van-col :span="5">
          <span class="label">{{item.label}}</span>
        </van-col>
        <van-col :span="19">
          <span>{{detailData[item.field]}}</span>
        </van-col>
      </van-row>
    </div>
  </div>
</div>
</template>
<script>
import qs from 'qs';
import { ImagePreview } from 'vant';
export default {
  name: "activitiesDetail",
  data() {
    return {
      detailData: {},
      dataList: [{
        label: '项目类别',
        field: 'projectTypeStr'
      }, {
        label: '服务对象',
        field: 'serveTargetStr'
      }, {
        label: '项目简介',
        field: 'intro'
      }]
    }
  },
  created() {
    this.getDetail(this.$route.query.id)
  },
  methods: {
    getDetail(id) {
      let me = this;
      me.$api.getProjectDetail(qs.stringify({
        id: id
      }), {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      }).then(res => {
        me.detailData = res;
      }).catch(err => {
        me.$toast(err)
      })
    },
    setPreviewUrl(item) {
      return process.env.VUE_APP_BASE_URL + 'admin/upms/file/download?filename=' + item
    },
    setTagColor() {
      let me = this;
      let color = "";
      if (me.detailData.status = '5') {
        color = "#666666"
      } else if (me.detailData.status = '10') {
        color = "#07c160"
      } else {
        color = "#EB4446"
      }
      return color
    },
    handlePreview(item,index) {
      let arr = JSON.parse(JSON.stringify(this.detailData.coverImage))
      var result = arr.map((item, i) => {
         return process.env.VUE_APP_BASE_URL + 'admin/upms/file/download?filename=' + item + '&type=1'
      });
      ImagePreview({
        images: result,
        startPosition: index
      });
    }
  }
}
</script>
<style lang="scss" scoped>
.proejctTitle {
    font-weight: bolder;
    font-size: 0.38rem;
    text-align: center;
    padding-top: 0.2rem;
}
</style>
